<template>
  <div class="statisticsTask">
    <el-tooltip
      class="item"
      effect="light"
      placement="bottom"
      popper-class="statisticsTaskTooltip"
      :open-delay="300"
    >
      <div slot="content">任务总数： {{countAllTask}}<br />未学任务： {{student.notStartCount}}</div>
      <div
        class="unlearn"
        :style="{ width: (student.notStartCount / countAllTask) * 100 + '%' }"
        ref="tooptip"
      >
        {{ student.notStartCount }}
      </div>
    </el-tooltip>
    <el-tooltip
      class="item"
      effect="light"
      placement="bottom"
      popper-class="statisticsTaskTooltip"
      :open-delay="300"
    >
      <div slot="content">任务总数： {{countAllTask}}<br />在学任务： {{student.studyingCount}}</div>
      <div
        class="learning"
        :style="{ width: (student.studyingCount / countAllTask) * 100 + '%' }"
        ref="tooptip"
      >
        {{ student.studyingCount }}
      </div>
    </el-tooltip>
    <el-tooltip
      class="item"
      effect="light"
      placement="bottom"
      ref="tooptip"
      popper-class="statisticsTaskTooltip"
      :open-delay="300"
    >
      <div slot="content">任务总数： {{ countAllTask }}<br />已学任务: {{student.finishedCount}}</div>
      <div class="learned" :style="{ width: (student.finishedCount / countAllTask) * 100 + '%' }">
        {{ student.finishedCount }}
      </div>
    </el-tooltip>
    <div ref="tooptipBox"></div>
  </div>
</template>


<script>
export default {
  data() {
    return {};
  },
  props: {
    student: Object,
  },
  computed: {
    countAllTask() {
      return this.student.finishedCount + this.student.notStartCount + this.student.studyingCount;
    },
  },
};
</script>

<style lang="stylus">
.statisticsTask {
  margin-top: 10px;
  display: flex;
  justify-items: flex-start;
  height: 19px;
  font-family: PMingLiU-ExtB;
  font-size: 12px;
  color: #ffffff;
  border-radius: 5px;
  overflow: hidden;

  .unlearn {
    text-align: center;
    background-color: #ec6666;
  }

  .learning {
    text-align: center;
    background-color: #f9c957;
  }

  .learned {
    text-align: center;
    background-color: #91CD74;
  }

  .item {
    cursor: pointer;
  }
}
</style>